<template>

    <div class="top">
        <div @click="changeDark" class="icon">
            <el-icon size="30" v-if="dark"><MoonNight /> </el-icon>
            <el-icon size="30" v-if="!dark"> <Sunny /> </el-icon>
        </div>
        <div style="width: 300px;">
            <el-button class="bottom" mb-2 @click="toggle">{{ language }}</el-button>
            <el-dropdown placement="bottom">
                <el-button class="bottom"> {{ $t('indexView.fontChoose') }} </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="modifyFont('youyuan, sans-serif')">{{ $t('indexView.youyuan') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('cute, sans-serif')">{{ $t('indexView.cute') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('pixel, sans-serif')">{{ $t('indexView.pixel') }}</el-dropdown-item>
                        <el-dropdown-item @click="modifyFont('rosyClouds, sans-serif')">{{ $t('indexView.rosyClouds') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <div class="tips"><el-text>{{ $t('textView.tips') }}</el-text></div>

        <div class="time">
            <h1>{{ $t('textView.a1') }}{{ Math.floor(testProblem?.remainingTime/60)}}{{ $t('textView.a2') }}{{ testProblem?.remainingTime%60 }}{{ $t('textView.a3') }}</h1>
        </div>
        <div class="submit"><el-button class="submit-bottom" type="danger" plain @click="open">{{ $t('textView.submit') }}<el-icon><Select /></el-icon></el-button></div>
    </div>



    <el-container >
        <TestingProblemView :testProblem="testProblem" :testId="prop.testId" :submit="submit"></TestingProblemView>
    </el-container>


    
</template>


<script setup lang="ts">
    import useLanguage from '@/hooks/useLanguage';
    import useTesting from '@/hooks/useTesting'
    import { onMounted ,onUnmounted,ref} from 'vue';
    import useDark from '@/hooks/useDark';
    import TestingProblemView from './son/testingProblemView.vue'
    import {ElMessage,ElMessageBox} from 'element-plus'
    import router from "@/router";
    
    const { language,toggle,modifyFont } = useLanguage();
    const { dark, changeDark } = useDark();
    const {testProblem,getTestProblemList}=useTesting()
    const submit=ref<number>(0);

    const prop=defineProps(['testId'])

    const open=()=>{
        ElMessageBox.confirm(
            '提交后将结束测验，您确定要提交吗?',
            'Warning',
            {
                confirmButtonText: '提交',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(()=>{
            submit.value++
        })
    }

    let timer;


    onMounted(async()=>{
        await getTestProblemList(prop.testId)
        timer=setInterval(()=>{
            testProblem.value.remainingTime--;
            if(testProblem.value.remainingTime<=0){
                ElMessage({
                    message:`测验已结束`,
                    grouping:true,
                    type:'error'
                })
                router.push("/home")
            }
        },1000)
    })

    onUnmounted(()=>{
        clearInterval(timer)
    })
</script>


<style scoped>
.top {
    display: flex;
    gap: 1%;
    width: 1400px;
}
.icon {
        margin-top: 16px;
        margin-left: 15px;
        float: left;
        cursor: pointer;
        /* 改变鼠标指针样式 */
        transition: color 0.3s ease;
    }
    .bottom{
        font-family: inherit;
        width: 90px; 
        height: 40px; 
        margin-top: 10px; 
        margin-left: 5px; 
    }

    .icon:hover {
        color: lightcoral;
    }

    .time{
        width: 680px;
        margin-left: 5%;
        font-size: 16px;
        margin-top: -5px;
    }

    .submit-bottom{
            height: 50px;
            width: 100px;
            margin-top: 10px;
        }

    .tips{
        margin-top: 40px;
        width: 300px;
    }

</style>